* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  background: url(../img/indexbg.png) no-repeat;
  background-size: 100%;
  color: #c2e8ff;
}

a {
  /* display: block; */
  
  cursor: pointer;
  color: #5b90ef;
}

b {
  font-weight: 400;
}

h3 {
  font-family: "宋体";
}

/* 例如给div添加样式 */
div {
  -webkit-user-select: none;
  /*谷歌 /Chrome*/
  -moz-user-select: none;
  /*火狐/Firefox*/
  -ms-user-select: none;
  /*IE 10+*/
  user-select: none;
  border-radius: 8px;
}


.main {
  width: 1230px;
  /* height: 1000px; */
  margin: 0 auto;
  overflow: hidden;
}

/* 导航栏 */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  margin: 10px 0;
  font-size: 18px;
}

.nav .logo {
  margin-left: 10px;
  font-size: 50px;
  color: #85daff;
}

.nav .time span {
  font-size: 26px;
  color: #ff7043;
}

.nav .weather span {
  font-size: 26px;
}

.tem {
  color: #bc424d;
}

.hum {
  color: #3b8eea;
}

.user {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.user span {
  font-size: 40px;
  color: #177a63;
}

/* 主要内容 */
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  /* background-color: blue; */
}

.content>div {
  width: 610px;
  height: 350px;
  margin-bottom: 10px;
  background-color: rgba(58, 176, 195, .2);
}

.content .control,
.content .history {
  height: 400px;
}

.content .show {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
}

.content .show>div {
  width: 240px;
  height: 130px;
  padding: 7px 7px;
  /* background-color: rgba(58, 176, 195, .5); */
  background-color: rgba(200, 200, 200, 0.1);
}

.huanj div,
.tiwen div,
.rate div,
.step div {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  font-size: 16px;
}

.huanj div {
  margin-top: 10px;
}

.show div span {
  font-size: 26px;
}

.content .video {
  position: relative;
  line-height: 350px;
  text-align: center;
  color: #5b90ef;
  font-size: 100px;
}

.video img{
  width: 510px;
  height: 340px;
  border-radius: 5px;
  position: absolute;
  top: 5px;
  left: 50px;
}

.content .control {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.content .control>div {
  width: 175px;
  height: 75%;
  padding: 10px;
  background-color: rgba(200, 200, 200, 0.1);
}

.light,
.fan,
.air {
  position: relative;
}

.left span {
  position: absolute;
  top: 40px;
  left: 15px;
  font-size: 14px;
}

.middle {
  position: absolute;
  font-size: 60px !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #0890ff;
}

.light .middle {
  color: #ff9400;
}

/* .right ul {
  position: absolute;
  top: 35px;
  right: 10px;
  display: flex;
}

.right a {
  padding: 3px;
  border-radius: 3px;
  font-size: 24px;
} */

button {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: inline-block;
  color: #17a2b8;
  border-color: #17a2b8;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

button:hover,
.right a:hover,
.active {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8
}

.disable{
  pointer-events:none;
}

button.focus,
button:focus {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
  box-shadow: 0 0 0 .2rem rgba(58, 176, 195, .5)
}

button:not(:disabled):not(.disabled).active,
button:not(:disabled):not(.disabled):active,
button.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8
}

button:not(:disabled):not(.disabled).active:focus,
button:not(:disabled):not(.disabled):active:focus,
button.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem rgba(23, 162, 184, .5)
}


.history {
  padding-top: 10px;
}